import React,{useState,useEffect} from 'react'
import '../scss/TheLoanDetails.scss'
import { Radio } from 'antd';
import {
  PrinterOutlined,
  LeftOutlined,
  CheckCircleFilled,
  ClockCircleFilled
} from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { Table } from 'antd'
import Information from './Information'

export default function TheLoanDetails(props) {

  const [pageSize,setPageSize] = useState('10')
  const [pageSizeNow,setPageSizeNow] = useState('1')

  const [resData,setreaData] = useState([])

  useEffect(()=>{
    console.log(props.history.location.state);
    console.log(props.history.location.id);
  },[])

  const columns = [
    {
      title: '期限',
      dataIndex: 'TimeLimit',
    },
    {
      title: '应还款日期',
      dataIndex: 'ShouldReimbursement',
    },
    {
      title: '实际还款日期',
      dataIndex: 'ActualRepaymentDate',
    },
    {
      title: '本金',
      dataIndex: 'Principal',
    },
    {
      title: '利息',
      dataIndex: 'Interest',
    },
    {
      title: '管理费',
      dataIndex: 'ManagementFee',
    },
    {
      title: '还款总额',
      dataIndex: 'ReimbursementAmount',
    },
    {
      title: '减免金额',
      dataIndex: 'CreditAmount',
    },
    {
      title: '逾期天数',
      dataIndex: 'OverdueDays',
    },
    {
      title: '状态',
      dataIndex: 'State',
    },
    {
      title: '提交人',
      dataIndex: 'SubmitOne',
    },
    {
      title: '提交时间',
      dataIndex: 'SubmitTime',
    },
    {
      title: '还款备注',
      dataIndex: 'ReimbursementNote',
    },    {
      title: '审核意见',
      dataIndex: 'AuditOpinion',
    },    {
      title: '审核人',
      dataIndex: 'TheReviewer',
    },    {
      title: '操作',
      dataIndex: 'Operation',
    },
  ];

  const data = [];

  for (let i = 0; i < 3; i++) {
    data.push({
      key:i,
      TimeLimit: i,
      ShouldReimbursement: '2021-12-12',
      ActualRepaymentDate: `2021-12-21`,
      Principal: `1000`,
      Interest:`0.00`,
      ManagementFee:i*i + '元',
      ReimbursementAmount:'2000元',
      RiskClassification:0.00,
      CollectionWay:'个人信用',
      Collectiondate:`2018-01-15 即将到期`,
      CollectionFeedback:<a>1</a>,
      ReimbursementAmount:'还款中',
      CreditAmount:'0.00',
      OverdueDays:'0',
      State:'已还款',
      SubmitOne:'系统',
      SubmitTime:'2021-12-22',
      ReimbursementNote:'银行代扣',
      AuditOpinion:'已审核',
      TheReviewer:'操作人员A',
      Operation: ''
    });
  }

  const getPage =(pageSizeNow,pageSize)=>{
    // console.log(pageSizeNow);
    // console.log(pageSize);
    setPageSize(pageSize)
    setPageSizeNow(pageSizeNow)
  }

  const back = ()=>{
    props.history.goBack()
  }


  return (
      <div className='theloandetails'>
        <div className='nav'>
          <span className='title2'>贷款详情</span>
          <div className='right'>
            <div>
              <span className='top'>初审 <CheckCircleFilled /> </span>
              <span className='top'>复审 <CheckCircleFilled /> </span>
              <span className='top'>终审 <CheckCircleFilled /> </span>
              <span className='top'>放款 <CheckCircleFilled /> </span>
              <span className='top'>还款 <CheckCircleFilled /> </span>
              <span className='top2'>完成 <ClockCircleFilled /> </span>

              <Radio.Button value="large" className='buttonloan'><PrinterOutlined /> 打印</Radio.Button>

              <Radio.Button value="large" className='buttonloan' onClick={back}><LeftOutlined /> 返回</Radio.Button>

            </div>
          </div>
        </div>

        {/* <span className='Clienname'><strong>( 客户【{props.history.location.name}】还款信息 )</strong></span> */}

        <Table
         columns={columns} dataSource={data}

         pagination={
          {
            total:data.length,
            showSizeChanger:true,
            showQuickJumper:true,
            showTotal:total => `共${Math.ceil(total/pageSize)}页/${total}条数据`,
            pageSizeOptions:['10','20','30'],
            onChange:getPage,
          }
        }
         
         />

         <Information name={props.history.location.name} state={props.history.location.state}/>

        {/* <span>{props.history.location.id}</span> */}
      </div>
  )
}
